<template>
  <router-view></router-view>
  <div class="app">
    <h3>app组件(祖) {{ carObj.name }}</h3>
    <button @click="carObj.name='car2'">修改数据</button>
    <Suspense>
      <template v-slot:default>
        <Child></Child>
      </template>
      <template v-slot:fallback>
        <h3>加载中。。。</h3>
      </template>
    </Suspense>
  </div>
</template>

<script setup>
import { reactive, provide, defineAsyncComponent } from 'vue'
const Child = defineAsyncComponent(() => import('@/components/Demo5.vue')) // defineAsyncComponent动态引入组件

// import Child from '@/components/Demo5.vue'
// components: {
//   Child
// }
let carObj = reactive({
  name: 'car1',
  price: 20,
})
provide('car', carObj) // 给自己的后代组件传递数据
</script>

<style lang="scss" scoped>
  * {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
  }
  .app {
    height: 300px;
    width: 300px;
    border: 1px solid #ccc;
    margin: 100px auto;
  }
</style>